<template>
  <AmBaseTable ref="AmBaseTableRef"
               :schema="modelSchema"
               :record-config="record"
               @paramsChange="getList"
               statistics
               :operations="[
                  // {
                  //   label: '导出',
                  //   auth: ['am:amStatistics:export'],
                  //   buttonProps: {
                  //     type: 'warning',
                  //     icon: 'el-icon-download',
                  //   },
                  //   clickCB: this.handleExport
                  // },
                ]">
    <!--    <template v-slot:column-id="scope">{{ scope }}</template>-->
    <template #chart>
      <BarChart :chart-data="chartData" />
    </template>
  </AmBaseTable>
</template>

<script>
import AmBaseTable from "../../../../components/AmComp/AmBaseTable.vue";
import {modelSchema} from "./model";
import BarChart from "./BarChart.vue";
import {isEmpty} from "lodash";
import {getStatisticsData} from "../../../../api/am/amBorrow";

export default {
  name: "Description",
  components: {
    BarChart,
    AmBaseTable,
  },
  data() {
    return {
      modelSchema,
      record: {
        // 显示搜索条件
        showSearch: true,
        data: [],
        total: 0,
        loading: false,
      },
    };
  },
  computed: {
    chartData() {
      const chartMap = {}
      if(!isEmpty(this.record.data)) {
        this.record.data.forEach(item => {
          chartMap[item.fileCode] = {
            lendNum: item.lendNum,
            borrowNum: item.borrowNum,
          }
        })
      }
      return {
        xAxisData: Object.keys(chartMap),
        series: [
          {
            name: '借出数量',
            type: 'bar',
            barWidth: 30,
            barGap: 1,
            silent: true,
            itemStyle: {
              normal: {
                color: '#2F8FFF',
              },
            },
            label: {
              show: true,
              color: '#2F8FFF',
              fontSize: 14,
              position: 'top', // 显示位置，可选值有 'top', 'bottom', 'inside', 'outside'
              formatter: '借出：{c}', // 标签内容格式器，这里表示显示数据值
            },
            data: Object.keys(chartMap).map(key => chartMap[key].lendNum)
          },
          {
            name: '借阅数量',
            type: 'bar',
            barWidth: 30,
            barGap: 1,
            silent: true,
            itemStyle: {
              normal: {
                color: '#47B558',
              },
            },
            label: {
              show: true,
              color: '#47B558',
              fontSize: 14,
              position: 'top', // 显示位置，可选值有 'top', 'bottom', 'inside', 'outside'
              formatter: '借阅：{c}', // 标签内容格式器，这里表示显示数据值
            },
            data: Object.keys(chartMap).map(key => chartMap[key].borrowNum)
          },
        ],
      }
    }
  },
  mounted() {
    // this.$nextTick(() => this.getList());
  },
  methods: {
    /** 查询档案著录列表 */
    getList() {
      this.record.loading = true;
      const queryParams = this.$refs.AmBaseTableRef.getQueryParams();
      getStatisticsData(queryParams).then(response => {
        this.record.data = response.rows;
        this.record.total = response.total;
        this.record.loading = false;
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('am/amBorrow/export', {
        ...this.queryParams
      }, `amBorrowStatic_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
